const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
class MyPlugin {
    // webpack在启动时候会自动触发apply的方法
    apply(compiler) {
        // compiler是webpack的核心配置项，包含所有的配置
        console.log('MyPlugin 启动')
        // emit是webpack即将往输出目录输出是触发的钩子
        compiler.hooks.emit.tap('MyPlugin', compilation => {
            // compilation是此次打包的上下文
            for (const name in compilation.assets) {
                // name是遍历的文件名称
                if (name.endsWith('.js')) {
                    const contents = compilation.assets[name].source()
                    const widthoutComments = contents.replace(/\/\*\*+\*\//g, '')
                    compilation.assets[name] = {
                        source: () => widthoutComments,
                        size: () => widthoutComments.length
                    }
                }
            }

        })
    }
}
module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
        filename: "bunld.js",
        path: path.join(__dirname, 'dist'),
        // publicPath: 'dist/'//网站根目录
    },
    // devtool:'source-map',
    devtool:'eval',
    devServer: {
        // hot:true,
        hotOnly:true,
        contentBase: './public',//静态资源访问目录

        proxy: {
            // 代理前缀
            '/api': {
                target: 'https://api.github.com',
                pathRewrite: {
                    '^/api': ''
                },
                changeOrigin: true //以实际代理请求的主机名去发生请求
            }
        }
    },
    module: {
        // 针对其它资源模块的配置属性
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']//css-loader将css-loader转换成js代码，push到数组中需要配合style-loader style标签
            },
            {
                test: /.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        // attrs: ['img:src', "a:href"]
                    }
                }
            },
            {
                test: /.png$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024 //10KB  只转换10kb以下的文件，10kb以上的文件，交给file-loader去处理
                    }
                }

            },
            // {
            //     test: /.md$/,
            //     use: ['html-loader', './markdown-loader']
            // }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'htmlwebpackplugin-----',
            meta: {
                viewport: 'width=device-width'
            },
            template: './src/index.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html'
        }),
        // new CopyWebpackPlugin({
        //     patterns: [
        //       { from: "public", to: "" },
        //     ],
        //   }),
        // new MyPlugin(),
        new webpack.HotModuleReplacementPlugin()//热更新
    ]
}